<template>
  <div class="result-wrapper">
      <div class="song" v-for="(item,index) in songList" :key="'song'+index">
        <div class="name">
          <span class="iconfont icon-play" @click=toPlay(item)></span>
          <a @click.prevent="toComment(item.id)">{{ item.name }}</a>
          <span class="iconfont icon-editmedia" v-if="item.mvid!=0" @click="toMv(item.mvid)"></span>
        </div>
        <div class="singer">{{ item.artists | formateSinger}}</div>
        <div class="album">{{ item.album.name }}</div>
        <div class="time">{{ item.duration | formateTime}}</div>
      </div>
    </div>
</template>


<script>
import songlist from '../mockdatas/songList';

export default {
  data(){
    return{
      // //歌曲列表
      songList:[]
    }
  },
  watch:{
    '$route.params.keyword': function(){
      console.log("地址发生变化");
      this.getSongList()
    }
  },
  created(){
      this.getSongList()
  },
  methods:{
    //获取歌曲列表
    async getSongList(){
      await this.$axios
        .get('/search?keyword=' + this.$route.params.keyword)
        .then(res => {
          this.songList = res.data.result.songs
        })
        .catch(err => {
          console.log("服务器繁忙");
          this.songList = songlist
        })
        console.log(this.songList);
    },
    // //点击跳转 音乐播放路由
    toPlay(item){
      this.$router.push("/player/" + item.id)
    },
    //点击跳转到 歌曲评论的路由
    toComment(id){
      this.$router.push("/comment/" + id)
    },
    toMv(mvid){
      // this.$router.push("/mv/" + mvid)
      this.$router.push({path:"/mv/" + mvid, params: {mvid: this.$route.params.mvid}})
    }
  },
  filters:{
    //处理歌手信息
    formateSinger(singers){
      let singStr = ""
      singers.forEach(item => {
          singStr += item.name
          singStr += " | "
      })
      singStr = singStr.slice(1,-2)
      return singStr
    },
    formateTime(time){
      const totalSec = time / 1000
      const min = ~~(totalSec / 60)
      let sec = ~~(totalSec % 60)
      sec = sec < 10 ? '0' + sec : sec
      return min + ":" + sec
    }
  }
}
</script>

<style scoped>
@import "@/assets/css/results.css";
</style>